<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人主页</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
         body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #555;
    overflow: hidden;
}

nav ul li {
    float: left;
}

nav ul li a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #111;
}

main {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
     </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人主页</h1>
    </header>
    <nav>
        <ul>
            <li><a href="https://gitee.com/springLuojiawei">gitee首页</a></li>
            <li><a href="https://gitee.com/springLuojiawei/learn">gitee仓库</a></li>
            <li><a href="https://gitee.com/springLuojiawei/boot-shop">一个项目</a></li>
            <li><a href="/list/1">返回主页</a></li>
        </ul>
    </nav>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>无需多多言手写Spring框架的我</p>
        </section>
        <section id="portfolio">
            <h2>作品集</h2>
            <div class="project">
                <img src="/static/image/mind-map.png" alt="项目1" width="888px">


            </div>
            <!-- 更多项目 -->
        </section>
    </main>
    <footer>
        <p>版权信息 &copy; 2024</p>
    </footer>
</body>
<script>
    $(document).ready(function() {
    // 示例：点击导航链接时，滚动到对应部分
    $('nav ul li a').click(function(e) {
        e.preventDefault(); // 阻止默认的链接跳转行为
        var target = $(this).attr('href'); // 获取目标部分的ID
        $('html, body').animate({
            scrollTop: $(target).offset().top
        }, 1000) // 平滑滚动到目标
</script>
</html>